<style scoped>
#projectDetailPage {
  min-width: 1100px;
}

.projectMenuItem {
  margin: 0 0 10px 0;
}

.projectMenuItemTitle {
  display: inline-block;
  color: #2d8cf099;
}

.ivu-card-body {
  display: flex;
  flex-flow: column;
  flex: 1;
}

.flex1 {
  display: flex;
  flex-flow: column;
  flex: 1;
}

.projectDescriptionContent {
  overflow-y: auto;
  padding: 10px 5px;
  word-break: break-word;
}

.statistics {
  /* width: 40%; */
  /*height: -webkit-fill-available;*/
  display: inline-block;
}

.statistics p {
  margin-top: 5px;
}

.showCount {
  font-size: 30px;
  vertical-align: middle;
  margin-left: 15px;
}

.changeEditColor:hover {
  background-color: #2db7f5;
  color: white;
}

.changeRemoveColor:hover {
  background-color: #ed4014;
  color: white;
}

.changeInviteColor:hover {
  background-color: #19be6b;
  color: white;
}

.enterWorkspaceColor:hover {
  background-color: #0b83e1;
  color: white;
  /*box-shadow:  0 3.2px 7.2px 0 rgb(0 0 0 / 13%), 0 0.6px 1.8px 0 rgb(0 0 0 / 11%);*/
}

.overEllipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.subProjectDes {
  text-indent: 2em;
  height: 150px;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  white-space: pre-line;
}

.subProjectExtraP {
  display: flex;
  flex-flow: row;
}

.subProjectExtraSpan {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.subProjectCard .ivu-card-extra {
  top: 10px;
}

.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.uploadAvatar {
  position: relative;
  width: 58px;
  height: 58px;
  top: 0;
  left: 0;
  outline: none;
  background-color: transparent;
  opacity: 0;
}

.uploadBox {
  display: inline-block;
  width: 58px;
  height: 58px;
  line-height: 58px;
  border-width: 0.75px;
  border-style: dashed;
  border-color: lightslategray;
}

.inline_style {
  display: flex;
}

.fileBtn {
  margin: 0px 3px;
}

.fileBtnHoverBlue:hover {
  background-color: #2db7f5;
  color: white;
}

.fileBtnHoverYellow:hover {
  background-color: #f4a942;
  color: white;
}
.ivu-card-body {
  display: inherit;
}

.btnHoverRed:hover {
  background-color: #ed4014;
  color: white;
}

.project_title {
  font-size: 1.5rem;
  color: rgba(214, 109, 0, 0.82);
  display: contents;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (min-width: 1300px) {
  .title_mw {
    max-width: 600px;
  }
}

@media screen and (max-width: 1299px) {
  .title_mw {
    max-width: 350px;
  }
}
</style>
<template>
  <div id="projectDetailPage" v-cloak>
    <template>
      <div :style="{height: contentPageCSS + 'px'}" style="margin-top: 0px;">
        <div span="2" style="height: inherit;width: 90px;position: absolute;">
          <i-menu :active-name="activeMenu" @on-select="changeMenuItem"
                  style="height: inherit;width: fit-content;z-index:98">
            <!--                    <menu-item name="overview" class="projectMenuItem" style="padding: 14px">-->
            <!--                        <Icon type="md-home" title="Overview" size="35" style="margin: 0 3px;"></Icon>-->
            <!--                    </menu-item>-->
            <menu-item name="info" class="projectMenuItem" style="padding: 14px">
              <Icon type="ios-information-circle" title="Information" size="35" style="margin: 0 3px;"></Icon>
            </menu-item>
            <menu-item name="task" class="projectMenuItem" style="padding: 14px">
              <Icon type="md-calendar" title="Tasks" size="35" style="margin: 0 3px;"></Icon>
            </menu-item>
            <menu-item name="resource" class="projectMenuItem" style="padding: 14px">
              <Icon type="ios-folder" title="Resources" size="35" style="margin: 0 3px;"></Icon>
            </menu-item>
          </i-menu>
        </div>

        <div style="margin-left: 70px;height: inherit;min-height: fit-content;">

          <!--                <div v-show="activeMenu=='overview'" :style="{height: contentPageCSS + 'px'}">-->
          <!--                    <div style="background:#eee;padding: 10px;">-->
          <!--                        <Card :bordered="false" dis-hover-->
          <!--                              style=" flex-flow: column;min-height: fit-content;">-->
          <!--                            <div slot="title">-->
          <!--                                <div style="margin-left:20px;top: 15px; position:absolute;left:50px;">-->
          <!--                                    <strong style="font-size:1.5rem;">班级主页</strong>-->
          <!--                                    <Divider type="vertical"></Divider>-->
          <!--&lt;!&ndash;                                    <strong style="font-size:1rem;">Overview</strong>&ndash;&gt;-->
          <!--                                </div>-->
          <!--                                <div style="display:flex;align-items:center;justify-content:center;">-->
          <!--                                    <span class="project_title title_mw">{{projectInfo.name}}</span>-->
          <!--                                </div>-->
          <!--                            </div>-->
          <!--                            <div slot="extra">-->
          <!--                                <div v-if="userRole == 'visitor'">-->
          <!--                                    <i-button-->
          <!--                                            type="success"-->
          <!--                                            @click="joinApplyModalShow()"-->
          <!--                                            title="Apply to join the project"-->
          <!--                                    >Apply to join-->
          <!--                                    </i-button>-->
          <!--                                </div>-->
          <!--                            </div>-->
          <!--                            <Row style="margin-left:60px" :style="{height: contentPageCSS - 105 + 'px'}">-->
          <!--                                <vue-scroll :ops="scrollOps">-->
          <!--                                    <i-col span="10" offset="1">-->
          <!--                                        <div style="margin:20px">-->
          <!--                                            <Card style="width:100%;height:10%">-->
          <!--                                                <div style="text-align:center;margin-bottom:15px;font-weight:bold;font-size:26px"-->
          <!--                                                >班级介绍-->
          <!--                                                </div>-->
          <!--                                                <div style="text-align:center; width:40%; float:left">-->
          <!--                                                    <img src="/GeoProblemSolving/Images/info.png"/>-->
          <!--                                                </div>-->
          <!--                                                <div style="width:60%; float:left; min-height: 90px">-->
          <!--                                                    <ul>-->
          <!--                                                        <li></li>-->
          <!--                                                        <li></li>-->
          <!--                                                        <li></li>-->
          <!--                                                        <li></li>-->
          <!--                                                    </ul>-->
          <!--                                                </div>-->
          <!--                                                <div style="text-align:center">-->
          <!--                                                    <h3>-->
          <!--                                                        <a @click="changeMenuItem('info')">进入班级介绍界面</a>-->
          <!--                                                    </h3>-->
          <!--                                                </div>-->
          <!--                                            </Card>-->
          <!--                                        </div>-->
          <!--                                    </i-col>-->
          <!--                                    <i-col span="10" offset="1">-->
          <!--                                        <div style="margin:20px">-->
          <!--                                            <Card style="width:100%">-->
          <!--                                                <div style="text-align:center;margin-bottom:15px;font-weight:bold;font-size:26px"-->
          <!--                                                >班级公告-->
          <!--                                                </div>-->
          <!--                                                <div style="text-align:center; width:40%; float:left">-->
          <!--                                                    <img src="/GeoProblemSolving/Images/tasks.png"/>-->
          <!--                                                </div>-->
          <!--                                                <div style="width:60%; float:left; min-height: 90px">-->
          <!--                                                    <ul>-->
          <!--                                                        <li>通知1</li>-->
          <!--                                                        <li>通知2</li>-->
          <!--                                                        <li>通知3</li>-->
          <!--                                                        <li>通知4</li>-->
          <!--                                                    </ul>-->
          <!--                                                </div>-->
          <!--                                                <div style="text-align:center">-->
          <!--                                                    <h3>-->
          <!--                                                        <a @click="changeMenuItem('task')">进入公告管理区</a>-->
          <!--                                                    </h3>-->
          <!--                                                </div>-->
          <!--                                            </Card>-->
          <!--                                        </div>-->
          <!--                                    </i-col>-->
          <!--                                    <i-col span="10" offset="1">-->
          <!--                                        <div style="margin:20px">-->
          <!--                                            <Card style="width:100%">-->
          <!--                                                <div style="text-align:center;margin-bottom:15px;font-weight:bold;font-size:26px"-->
          <!--                                                >Workspace-->
          <!--                                                </div>-->
          <!--                                                <div style="text-align:center; width:40%; float:left">-->
          <!--                                                    <img src="/GeoProblemSolving/Images/steps.jpg"/>-->
          <!--                                                </div>-->
          <!--                                                <div style="width:60%; float:left; min-height: 90px">-->
          <!--                                                    <ul>-->
          <!--                                                        <li>Create a subproject with iterative step</li>-->
          <!--                                                        <li>Create a step directly</li>-->
          <!--                                                        <li>Start to work with other participants directly</li>-->
          <!--                                                    </ul>-->
          <!--                                                </div>-->
          <!--                                                <div style="text-align:center">-->
          <!--                                                    <h3>-->
          <!--                                                        <a @click="changeMenuItem('workspace')">Click to check it</a>-->
          <!--                                                    </h3>-->
          <!--                                                </div>-->
          <!--                                            </Card>-->
          <!--                                        </div>-->
          <!--                                    </i-col>-->
          <!--                                    <i-col span="10" offset="1">-->
          <!--                                        <div style="margin:20px">-->
          <!--                                            <Card style="width:100%">-->
          <!--                                                <div style="text-align:center;margin-bottom:15px;font-weight:bold;font-size:26px"-->
          <!--                                                >资源管理-->
          <!--                                                </div>-->
          <!--                                                <div style="text-align:center; width:40%; float:left">-->
          <!--                                                    <img src="/GeoProblemSolving/Images/data.png"/>-->
          <!--                                                </div>-->
          <!--                                                <div style="width:60%; float:left; min-height: 90px">-->
          <!--                                                    <ul>-->
          <!--                                                        <li>课程资源</li>-->
          <!--                                                        <li>文献资源</li>-->
          <!--                                                        <li>工具资源</li>-->
          <!--                                                        <li>xx资源</li>-->
          <!--                                                    </ul>-->
          <!--                                                </div>-->
          <!--                                                <div style="text-align:center">-->
          <!--                                                    <h3>-->
          <!--                                                        <a @click="changeMenuItem('resource')">进入资源管理区</a>-->
          <!--                                                    </h3>-->
          <!--                                                </div>-->
          <!--                                            </Card>-->
          <!--                                        </div>-->
          <!--                                    </i-col>-->
          <!--                                    <i-col span="24">-->
          <!--                                        <div style="text-align: center">-->
          <!--                                            <span style="margin:25px 0; font-size:24px">Project</span>-->
          <!--                                            <span style="margin: 0px 10px; font-size: 14px;"> is created for dealing with geo-problems in a participatory manner. </span>-->
          <!--                                        </div>-->
          <!--                                    </i-col>-->
          <!--                                </vue-scroll>-->
          <!--                            </Row>-->
          <!--                        </Card>-->
          <!--                    </div>-->
          <!--                </div>-->

          <div v-show="activeMenu=='info'" :style="{height: contentPageCSS + 'px'}">
            <div style="background:#eee;padding: 10px;">
              <Card :bordered="false" dis-hover
                    style="flex-flow: column;min-height: fit-content;">
                <div slot="title">
                  <!--                                <h1 slot="title" class="projectMenuItemTitle">Introduction</h1>-->
                  <div style="margin-left:20px;top: 15px; position:absolute;left:50px;">
                    <strong style="font-size:1.5rem;">班级介绍</strong>
                    <Divider type="vertical"></Divider>
                  </div>
                  <div style="display:flex;align-items:center;justify-content:center;">
                    <span class="project_title title_mw">{{projectInfo.name}}</span>
                  </div>
                </div>
                <div slot="extra">
                  <div>
                    <Poptip trigger="hover" content="Edit project information" placement="left"
                            v-if="detailPermissionIdentity(projectInfo.permission, userRole, 'edit_info')">
                      <i-button style="margin: 0 5px;" class="changeEditColor"
                                @click="editModelShow()">
                        <Icon type="ios-create" :size="20"></Icon>
                      </i-button>
                    </Poptip>
                    <Poptip trigger="hover" content="Remove project" placement="left"
                            v-if="userRole == 'manager'">
                      <i-button style="margin: 0 5px;" class="changeRemoveColor"
                                @click="deleteProjectShow()">
                        <Icon type="md-close" :size="20"></Icon>
                      </i-button>
                    </Poptip>
                  </div>
                  <div v-if="userRole == 'visitor'">
                    <i-button
                      type="success"
                      @click="joinApplyModalShow()"
                      title="Apply to join the project"
                    >Apply to join
                    </i-button>
                  </div>
                </div>
                <div class="flex1" style="min-height: fit-content;">
                  <Row :gutter="25" style="flex: 1;display: flex;flex-flow: initial">
                    <i-col span="16" style="display: flex;flex-flow: column">
                      <div style="border: solid 1px #eeeeee;flex: 1;padding: 20px;flex-flow: column;display: flex;">
                        <Row :gutter="15" style="height: 200px;display: flex;">
                          <i-col span="8">
                            <div style="width: 200px;height: 200px;">
                              <img :src="projectInfo.picture"
                                   style="height: inherit;width: inherit;"
                                   v-if="projectInfo.picture!=''&&projectInfo.picture!=undefined"
                              />
                              <avatar :username="projectInfo.name" :size="200"
                                      :title="projectInfo.name" :rounded="false"
                                      v-else></avatar>
                            </div>
                          </i-col>
                          <i-col span="16" style="align-self: flex-end;">
                            <div style="text-align: center;">
                              <div class="statistics">
                                <div style="text-align: left;padding: 5px;">
                                  <p><strong>专业： </strong><span id="projectTitle"
                                                                th:text="${projectInfo.name}">专业名</span>
                                  </p>
                                  <p><strong>班级人数： </strong><span id="projectPrivacy"
                                                                  th:text="${projectInfo.privacy}">42</span>
                                    <span style="margin-left: 10px; cursor: pointer"
                                          title="Modify the permission of participants"
                                          v-if="userRole == 'manager'"
                                          @click="modifyPermission">
                                                                       <Icon type="md-cog" size="16"
                                                                             color="grey"></Icon>
                                                                    </span>
                                  </p>
                                  <p><strong>班长: </strong><span id="projectCategory"
                                                                th:text="${projectInfo.category}">xxx</span>
                                  </p>
                                  <!--                                                                <p><strong>Tag: </strong><span id="projectTag"-->
                                  <!--                                                                                               class="overEllipsis"-->
                                  <!--                                                                                               style="display: inline-block;vertical-align: top;width:230px"-->
                                  <!--                                                                                               th:text="${projectInfo.tag}"-->
                                  <!--                                                                                               th:attr="title=${projectInfo.tag}">Project tag</span>-->
                                  <!--                                                                </p>-->
                                  <!--                                                                <p><strong>Manager: </strong>-->
                                  <!--                                                                    {{projectInfo.managerName}}-->
                                  <!--                                                                </p>-->
                                  <p><strong>创建时间： </strong>
                                    {{projectInfo.createdTime}}</p>
                                </div>
                              </div>
                              <div style="position: absolute;right: 5px;bottom: 5px;">
                                <div>
                                  <Icon type="md-git-branch" size="30"></Icon>
                                  <span class="showCount">{{projectInfo.children.length}}</span>
                                </div>
                                <div>
                                  <Icon type="md-contacts" size="30"></Icon>
                                  <span class="showCount">{{projectInfo.members.length}}</span>
                                </div>
                              </div>
                              <div style="position: absolute;right: 15px;top: -65px;">
                                <i-button class="enterWorkspaceColor"
                                          @click="changeMenuItem('workspace')">
                                  <Icon type="md-git-branch" :size="25"></Icon>
                                  <strong>Enter Workspace</strong>
                                </i-button>
                              </div>
                            </div>
                          </i-col>
                        </Row>
                        <div class="flex1" style="margin-top: 10px;">
                          <div style="flex: 1;padding: 5px;min-height: 100px;border: #e8eaec 0.1px dashed;">
                            <h3>班级介绍:</h3>
                            <div class="projectDescriptionContent"
                                 :style="{height: contentPageCSS - 393 + 'px'}">
                              <vue-scroll :ops="scrollOps">
                                <div id="projectDescription" style="white-space: pre-line;"
                                     th:text="${projectInfo.description}">
                                  XXXX
                                </div>
                              </vue-scroll>
                            </div>
                          </div>
                        </div>
                      </div>
                    </i-col>
                    <i-col span="8" style="display: flex;flex-flow: column">
                      <div style="border: solid 1px #eeeeee;" class="flex1">
                        <Card :bordered="false" dis-hover>
                          <div slot="title">
                            <h1>班级成员</h1>
                          </div>
                          <div slot="extra">
                            <div>
                              <Poptip trigger="hover" content="Invite members"
                                      v-if="detailPermissionIdentity(projectInfo.permission, userRole, 'invite_member')"
                                      placement="left">
                                <i-button class="changeInviteColor"
                                          @click="inviteModalShow()">
                                  <Icon type="md-person-add" :size="20"></Icon>
                                </i-button>
                              </Poptip>
                              <Poptip trigger="hover" content="Remove members"
                                      v-if="detailPermissionIdentity(projectInfo.permission, userRole, 'manage_member')"
                                      placement="left">
                                <i-button style="margin-left:5px;"
                                          class="changeRemoveColor"
                                          @click="deleteMemberModelShow">
                                  <Icon type="md-remove-circle" :size="20"></Icon>
                                </i-button>
                              </Poptip>
                            </div>
                          </div>
                          <div :style="{height: contentPageCSS - 200 + 'px'}"
                               style="overflow-y:auto;">
                            <vue-scroll :ops="scrollOps">
                              <Card v-for="member in participants"
                                    :key="member.userId"
                                    style="margin-top: 5px;cursor: pointer;"
                                    @click.native=goPersonalPage(member.userId)
                              >
                                <div title="Member">
                                  <h2 class="overEllipsis">{{member.name}}</h2>
                                </div>
                              </Card>
                            </vue-scroll>
                          </div>
                        </Card>
                      </div>
                    </i-col>
                  </Row>
                </div>
              </Card>
            </div>
          </div>
          <div v-show="activeMenu=='resource'" :style="{height: contentPageCSS + 'px'}">
            <div style="background:#eee;padding: 10px;">
              <Card :bordered="false" dis-hover
                    style="min-height: 565px;min-height: fit-content;">
                <!--                            <h1 slot="title" class="projectMenuItemTitle">Resources</h1>-->
                <div slot="title">
                  <div style="margin-left:20px;top: 15px; position:absolute;left:50px;">
                    <strong style="font-size:1.5rem;">资源管理</strong>
                    <Divider type="vertical"></Divider>
                  </div>
                  <div style="display:flex;align-items:center;justify-content:center;">
                    <span class="project_title title_mw">{{projectInfo.name}}</span>
                  </div>
                </div>
                <div slot="extra">
                  <Tooltip content="Enter Workspace">
                    <i-button class="enterWorkspaceColor"
                              @click="changeMenuItem('workspace')">
                      <Icon type="md-git-branch" :size="20"></Icon>
                    </i-button>
                  </Tooltip>
                  <Tooltip content="Resources center" placement="left" class="fileBtn">
                    <i-button @click="goResourceCenter" class="fileBtnHoverYellow">
                      <Icon type="ios-albums" size="20"></Icon>
                    </i-button>
                  </Tooltip>
                </div>
                <div :style="{height: contentPageCSS - 105 + 'px'}">
                  <!-- <child-folder
                          :user-role="userRole"
                          :project-info="projectInfo"
                          ref="folderTreeEl"></child-folder> -->
                </div>
              </Card>
            </div>
          </div>
          <div v-show="activeMenu=='task'" style="height: inherit;min-height: fit-content;">
            <div style="background:#eee;padding: 10px">
              <Card :bordered="false" dis-hover
                    style="min-height: 565px;min-height: fit-content;">
                <!--                            <h1 slot="title" class="projectMenuItemTitle">Task assignment</h1>-->
                <div slot="title">
                  <div style="margin-left:20px;top: 15px; position:absolute;left:50px;">
                    <strong style="font-size:1.5rem;">班级公告</strong>
                    <Divider type="vertical"></Divider>
                    <!--                                    <strong style="font-size:1rem;">Task assignment</strong>-->
                  </div>
                  <div style="display:flex;align-items:center;justify-content:center;">
                    <span class="project_title title_mw">{{projectInfo.name}}</span>
                  </div>
                </div>
                <div slot="extra">
                  <i-button class="enterWorkspaceColor"
                            @click="changeMenuItem('workspace')">
                    <Icon type="md-git-branch" :size="20"></Icon>
                    <strong>Enter Workspace</strong>
                  </i-button>
                </div>
                <div :style="{height: contentPageCSS - 105 + 'px'}">
                  <!-- <child-task
                          :project-info="projectInfo"
                          :user-role="userRole"
                          ref="taskTreeEl"></child-task> -->
                </div>
              </Card>
            </div>
          </div>
          <Modal
            v-model="editProjectModal"
            title="Edit project information"
            :mask-closable="false"
            width="900"
          >
            <div>
              <i-form
                ref="projectEditForm"
                :model="projectEditForm"
                :rules="editProjectFormRuleValidate"
                :label-width="100"
              >
                <Form-item label="Title" prop="title">
                  <i-input v-model="projectEditForm.name" placeholder="Enter something..."></i-input>
                </Form-item>
                <Form-item label="Description" prop="description">
                  <i-input v-model="projectEditForm.description"></i-input>
                </Form-item>
                <Form-item label="Tag" prop="tag">
                  <i-input
                    v-model="inputTag"
                    placeholder="Enter some tag to introduce the project"
                    style="margin-left:0.5%;width: 200px"
                    @keyup.enter.native="addTag(inputTag)"
                  ></i-input>
                  <i-button
                    icon="ios-add"
                    type="dashed"
                    size="small"
                    style="margin-left:2.5%"
                    @click="addTag(inputTag)"
                  >Add Tag
                  </i-button>
                  <Tag
                    color="primary"
                    v-for="(tag,index) in projectEditForm.editTags"
                    :key="index"
                    closable
                    @on-close="deleteTag(index)"
                  >{{tag}}
                  </Tag>
                </Form-item>
                <Form-item label="Privacy" prop="privacy">
                  <Radio-group v-model="projectEditForm.privacy">
                    <Radio
                      label="Public"
                      title="Other users can find the group and see who has membership."
                    ></Radio>
                    <Radio
                      label="Discoverable"
                      title="Other users can find this group, but membership information is hidden."
                    ></Radio>
                    <Radio label="Private" title="Other users can not find this group."></Radio>
                  </Radio-group>
                </Form-item>
                <Form-item prop="image" label="Image" :label-width="100">
                  <div class="inline_style">
                    <div class="demo-upload-list" v-show="pictureUrl!=''">
                      <div>
                        <img :src="pictureUrl"/>
                        <div class="demo-upload-list-cover">
                          <Icon type="ios-eye-outline" @click.native="handleView()"></Icon>
                          <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
                        </div>
                      </div>
                    </div>
                    <div class="uploadBox">
                      <Icon type="ios-camera" size="20" style="position:absolute;margin:18px;"></Icon>
                      <input
                        @change="uploadPhoto($event)"
                        type="file"
                        class="uploadAvatar"
                        accept="image/*"
                        id="choosePicture"
                      />
                    </div>
                    <Modal title="View image" v-model="visible">
                      <img :src="pictureUrl" v-if="visible" style="width: 100%"/>
                    </Modal>
                  </div>
                </Form-item>
              </i-form>
            </div>
            <div slot="footer" style="display: inline-block">
              <i-button type="primary" @click="editProjectSubmit('projectEditForm')" style="float:right;">OK
              </i-button>
              <i-button @click="closeEditModel()" style="float:right;margin-right: 15px;">Cancel</i-button>
            </div>
          </Modal>
          <Modal
            v-model="removeProjectModal"
            title="Delete warning "
            @on-ok="deleteProject"
            ok-text="Ok"
            cancel-text="Cancel"
          >
            <p>Do you sure to delete this project?</p>
          </Modal>
          <Modal
            v-model="inviteModal"
            title="Invite others to join the project"
            :mask-closable="false"
            width="800">
            <i-form ref="emailInfo" :model="emailInfo" :rules="emailInfoRule" :label-width="200" inline>
              <Form-item label="Recipient" prop="inputEmail" style="width:100%">
                <Auto-complete
                  v-model="emailInfo.inputEmail"
                  @on-search="emialAutoFill"
                  placeholder="input email and press enter button the email will be added below"
                  style="width:70%"
                >
                  <i-option v-for="item in prompt" :value="item" :key="item">{{ item }}</i-option>
                </Auto-complete>
              </Form-item>
              <Form-item label="Title" prop="emailTitle" style="width:100%">
                <i-input
                  v-model="emailInfo.emailTitle"
                  placeholder="set the email title to recivers by your self"
                  style="width:70%"
                />
              </Form-item>
              <Form-item label="Content" prop="emailContent" style="width:100%">
                <i-input type="textarea" style="width:70%" :rows="4" v-model="emailInfo.emailContent"/>
              </Form-item>
            </i-form>
            <div slot="footer" style="display: inline-block">
              <i-button type="primary" @click="invite('emailInfo')" style="float:right;">Confirm</i-button>
              <i-button @click="closeInviteModel()" style="float:right;margin-right: 15px;">Cancel</i-button>
            </div>
          </Modal>
          <Modal
            v-model="deleteMemberModel"
            title="Remove a member from the project"
            :mask-closable="false"
            width="600">
            <Radio-group v-model="removeMemberName">
                        <span v-for="member in participants" :key="member.name"
                              @click="getRemoveMemberId(member.userId)">
                            <Radio :label="member.name" style="margin-right: 30px"
                                   v-if="member.userId != userInfo.userId">
                            </Radio>
                        </span>
            </Radio-group>
            <div slot="footer" style="display: inline-block">
              <i-button type="primary" @click="removeMembersAlertShow()" style="float:right;">Confirm
              </i-button>
              <i-button @click="closeDeleteMembersModel()" style="float:right;margin-right: 15px;">Cancel
              </i-button>
            </div>
          </Modal>
          <Modal
            v-model="removeMemberAlertModel"
            title="Remove the member"
            @on-ok="removeMember"
            ok-text="OK"
            cancel-text="Cancel">
            <p>Do you sure to remove {{removeMemberName}} from this project?</p>
          </Modal>
          <Modal v-model="applyJoinModal" title="Apply to join the project">
            <i-form ref="applyValidate" :model="applyValidate" :rules="applyRuleValidate" :label-width="80">
              <form-item label="Reason" prop="reason">
                <i-input
                  v-model="applyValidate.reason"
                  type="textarea"
                  :rows="4"
                  placeholder="Enter The Reason For Application ..."
                ></i-input>
              </form-item>
            </i-form>
            <div slot="footer">
              <i-button @click="applyJoinModal=false">Cancel</i-button>
              <i-button type="success" @click="joinApply('applyValidate')">Apply</i-button>
            </div>
          </Modal>
          <Modal
            v-model="resetProjectTypeNotice"
            title="Reset workspace type"
          >
            <h2>Please confirm that all subprojects have been deleted.</h2>
            <div slot="footer">
              <i-button type="primary" @click="resetProjectTypeNotice=false">OK</i-button>
            </div>
          </Modal>
          <Modal
            v-model="resetProjectTypeModel"
            title="Reset workspace type"
          >
            <h2>Are you sure to reset the workspace type?</h2>
            <div slot="footer">
              <i-button type="primary" @click="resetProjectType()">Submit</i-button>
            </div>
          </Modal>
        </div>
      </div>
    </template>
    <div th:replace="navigation::commonFooter"></div>
  </div>
</template>
<script>
import Avatar from "vue-avatar";
export default {
  components: {
    Avatar,
  },
  data() {
    return {
      contentPageCSS: 0,
      scrollOps: {
        bar: {
          background: "#808695"
        }
      },
      ipPort: "/GeoProblemSolving",
      tokenStr: '',
      activeMenu: "info",
      //user
      userInfo: {
        userState: true,
        name: 'visitor',
        userId: '',
        avatar: '',
      },
      userRole: "visitor",
      creatorInfo: {},
      participants: [],
      // project
      projectInfo: {
        aid:"1",
        name:"班级1",
        description:"专业2",
        purpose:"Data visualization",
        creator:"0743e9c0-6f02-411c-8b5c-0fcdccaf2eaf",
        members:[{"role":"manager","userId":"0743e9c0-6f02-411c-8b5c-0fcdccaf2eaf"},{"role":"expert","userId":"01422e09-9fe3-40ea-a777-5aa6d7c0a696"}],
        type:"Activity_Group",
        parent:null,
        children:["31344a34-18fa-4e72-978c-a8ed8d25df59","fd9b0114-5016-4417-bf3a-a73dafa95b76","220c1ed9-8297-465c-9b7f-5ea467237a12","c4dc1e23-f965-45df-b1ad-cff1e20ffae8"],
        permission:"{\"observe\":{\"manager\":null,\"coreteam\":null,\"widerteam\":null,\"visitor\":\"No\"},\"auto_join\":{\"manager\":null,\"coreteam\":null,\"widerteam\":null,\"visitor\":\"No\"},\"edit_info\":{\"manager\":true,\"coreteam\":true,\"widerteam\":true,\"visitor\":null},\"invite_member\":{\"manager\":true,\"coreteam\":true,\"widerteam\":true,\"visitor\":null},\"manage_member\":{\"manager\":true,\"coreteam\":false,\"widerteam\":false,\"visitor\":null},\"create_task\":{\"manager\":true,\"coreteam\":false,\"widerteam\":true,\"visitor\":null},\"manage_task\":{\"manager\":true,\"coreteam\":false,\"widerteam\":true,\"visitor\":null},\"upload_resource\":{\"manager\":true,\"coreteam\":true,\"widerteam\":true,\"visitor\":null},\"use_resource\":{\"manager\":true,\"coreteam\":true,\"widerteam\":true,\"visitor\":null},\"manage_resource\":{\"manager\":true,\"coreteam\":false,\"widerteam\":true,\"visitor\":null},\"manage_workspace_type\":{\"manager\":true,\"coreteam\":false,\"widerteam\":true,\"visitor\":null},\"import_tool\":{\"manager\":true,\"coreteam\":true,\"widerteam\":false,\"visitor\":null},\"use_tool\":{\"manager\":true,\"coreteam\":true,\"widerteam\":true,\"visitor\":null},\"manage_tool\":{\"manager\":true,\"coreteam\":false,\"widerteam\":false,\"visitor\":null},\"manage_child_activity\":{\"manager\":true,\"coreteam\":false,\"widerteam\":true,\"visitor\":null}}",
        level:0,
        createdTime:"2021-08-09 10:18:34",
        activeTime:"2021-10-30 14:18:04",
        toolList:null,
        privacy:"Public",
        tag:"GIS \u0026 RS,Human,workplace",
        picture:"",
        category:"Educational",
        isMember:false,
        isManager:true,
      },
      editProjectModal: false,
      projectEditForm: {
        description: "",
        name: "",
        privacy: "",
        editTags: ""
      },
      editProjectFormRuleValidate: {
        category: [
          {
            required: true,
            message: "The project description cannot be empty",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "The name cannot be empty and no more than 60 characters",
            trigger: "blur",
            max: 60
          }
        ],
        description: [
          {
            required: true,
            message:
              "The description cannot be empty and no more than 360 characters",
            trigger: "blur",
            max: 500
          }
        ],
        privacy: [
          {
            required: true,
            message: "The project privacy cannot be empty",
            trigger: "blur"
          }
        ],
      },
      pictureUrl: "",
      inputTag: "",
      visible: false,
      removeProjectModal: false,
      inviteModal: false,
      emailInfo: {
        inputEmail: "",
        emailTitle: "",
        emailContent: ""
      },
      emailInfoRule: {
        inputEmail: [
          {
            required: true,
            type: "email",
            message: "Incorrect email format",
            trigger: "blur"
          }
        ],
        emailTitle: [
          {
            required: true,
            message: "The title cannot be empty",
            trigger: "blur"
          }
        ],
        emailContent: [
          {
            required: true,
            message: "The content cannot be empty",
            trigger: "blur"
          }
        ]
      },

      prompt: [],
      deleteMemberModel: false,
      removeMemberName: "",
      removeMemberAlertModel: false,
      removeMemberId: "",
      newManagerId: "",
      //加入项目
      applyProjectInfo: {},
      applyValidate: {
        reason: ""
      },
      applyRuleValidate: {
        reason: [
          {required: true, message: "Please enter the reason for application", trigger: "blur"},
          {type: "string", min: 5, message: "The reason no less than 10 characters", trigger: "blur"}
        ]
      },
      applyJoinModal: false,
      haveApplied: false,
      resetProjectTypeNotice: false,
      resetProjectTypeModel: false,
      // tool
      workPanels: [],
    }
  },
  created(){
  },
  mounted() {
    // this.userEnter();
    this.resizeContent();
    // this.changeMenuByUrl();
  },
  methods: {
    // initTaskSocket(){
    //     if (this.$refs.taskTreeEl.taskSocket != null){
    //         return;
    //     }
    //     this.$refs.taskTreeEl.taskSocket = null;
    //     let taskSocketURL = `${window.location.protocol === 'https:' ? 'wss://' : 'ws://'}` + window.location.host + "/GeoProblemSolving/OperationServer/task/" + this.projectInfo.aid;
    //     if (window.location.host == "localhost:8080") {
    //         taskSocketURL = "ws://localhost:8081/GeoProblemSolving/OperationServer/task/" + this.projectInfo.aid;
    //     }
    //     //实例化webSocket，然后绑定方法
    //     this.$refs.taskTreeEl.taskSocket = new WebSocket(taskSocketURL);
    //     this.$refs.taskTreeEl.taskSocket.onopen = this.$refs.taskTreeEl.onOpen;
    //     this.$refs.taskTreeEl.taskSocket.onmessage = this.$refs.taskTreeEl.onMessage;
    //     this.$refs.taskTreeEl.taskSocket.onclose = this.$refs.taskTreeEl.onClose;
    //     this.$refs.taskTreeEl.taskSocket.onerror = this.$refs.taskTreeEl.onError;

    //     this.$refs.taskTreeEl.sendMessage({"type": "test"});
    // },
    // closeTaskSocket(){
    //     if (this.$refs.taskTreeEl.taskSocket != null && this.$refs.taskTreeEl.taskSocket.readyState == this.$refs.taskTreeEl.taskSocket.OPEN){
    //         this.$refs.taskTreeEl.taskSocket.close();
    //     }
    // },
    roleIdentity() {
      this.userRole = roleIdentify(
        this.projectInfo.members,
        this.userInfo.userId
      );
    },
    detailPermissionIdentity(permission, role, operation) {
      return this.userRoleApi.permissionIdentity(
        JSON.parse(permission),
        role,
        operation
      );
    },

    // getParticipants() {
    //     let url = "/GeoProblemSolving/project/" + this.projectInfo.aid + "/user";
    //     //callback setTimeBack
    //     axios
    //         .get(url)
    //         .then((res) => {
    //             if (res.data.code == 0) {
    //                 this.creatorInfo = res.data.data.creator;
    //                 this.participants = res.data.data.members;
    //             } else {
    //                 console.log(res.data.msg);
    //             }
    //         })
    //         .catch((err) => {
    //             console.log(err);
    //         });
    // },
    changeMenuByUrl() {
      var content = this.getURLParameter("content");
      if (content != null) {
        var array = ["overview", "info", "task", "workspace", "resource"];
        if (array.includes(content)) {
          this.activeMenu = content;
        }
      }
    },
    getURLParameter(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    },
    userEnter() {
      if (this.userRole != "Token") {
        if (!this.userInfo.userState) {
          window.location.href = "/login";
        } else {
          if (this.projectInfo.privacy != "Public" && this.userRole == "visitor") {
            window.location.href = "/projectList";
          }
        }

      }
    },
    resizeContent() {
      if (window.innerHeight > 735) {
        this.contentPageCSS = window.innerHeight - 120;
      } else {
        this.contentPageCSS = 610;
      }
      window.onresize = () => {
        return (() => {
          this.resizeContent();
          this.$refs.navigationEl.identityMenuCSS();
          if (this.$refs.folderTreeEl != undefined) {
            this.$refs.folderTreeEl.resizeContent();
          }
        })()
      }
    },
    changeMenuItem(name) {
      // if (name == "task"){
      //     this.initTaskSocket();
      // }else {
      //     this.closeTaskSocket();
      // }
      this.activeMenu = name;
      var tokenParam = '';
      if (this.tokenStr != null) {
        tokenParam = "&token=" + this.tokenStr;
      }
      window.history.replaceState(null, null, '/GeoProblemSolving/projectInfo/' + this.projectInfo.aid + "?content=" + name + tokenParam);

    },
    memberListStr(members) {
      let membersStr = '';
      for (let i = 0; i < members.length; i++) {
        if (i == 0) {
          membersStr += members[i].name;
        } else {
          membersStr += ',' + members[i].name;
        }
      }
      return membersStr;
    },
    editModelShow() {
      this.editProjectModal = true;
      let editProjectInfo = this.projectInfo;
      this.projectEditForm.name = editProjectInfo.name;
      this.projectEditForm.description = editProjectInfo.description;
      this.projectEditForm.category = editProjectInfo.category;
      this.projectEditForm.privacy = editProjectInfo.privacy;
      this.pictureUrl = editProjectInfo.picture;

      var tags = editProjectInfo["tag"].split(",");
      if (tags[0] == "") {
        this.projectEditForm.editTags = [];
      } else {
        this.projectEditForm.editTags = tags;
      }
    },
    closeEditModel() {
      this.editProjectModal = false;
    },
    uploadPhoto(e) {
      // 利用fileReader对象获取file
      var file = e.target.files[0];
      var filesize = file.size;
      // 2,621,440   2M
      if (filesize > 2101440) {
        // 图片大于2MB
        this.$Message.error("size > 2MB");
      } else {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = e => {
          // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
          let formData = new FormData();
          formData.append("picture", file);
          axios
            .post("/GeoProblemSolving/res/image", formData)
            .then(res => {
              if (res.data.code === 0) {
                this.pictureUrl = res.data.data;
                $('#choosePicture').val('');
              } else {
                this.$Message.error("Upload picture fail!");
              }
            })
            .catch(err => {
              throw err;
            });
        };
      }
    },
    handleView() {
      this.visible = true;
    },
    handleRemove() {
      this.pictureUrl = "";
    },
    addTag(tag) {
      if (tag != "") {
        this.projectEditForm.editTags.push(tag);
      }
      this.inputTag = "";
    },
    deleteTag(index) {
      this.projectEditForm.editTags.splice(index, 1);
    },
    editProjectSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          let form = {
            aid: this.projectInfo.aid,
            name: this.projectEditForm.name,
            category: this.projectEditForm.category,
            description: this.projectEditForm.description,
            tag: this.projectEditForm.editTags.toString(),
            privacy: this.projectEditForm.privacy,
            picture: this.pictureUrl,
          };
          axios
            .put("/GeoProblemSolving/project/" + this.projectInfo.aid, form)
            .then(res => {
              if (res.data == "Offline") {
                this.$refs.navigationEl.logout("login");
              } else if (res.data.code == 0) {
                var newProjectInfo = res.data.data;
                this.editProjectModal = false;
                this.projectInfo = newProjectInfo;
                $('#projectTitle').html(newProjectInfo.name);
                $('#projectDescription').html(newProjectInfo.description);
                $('#projectPrivacy').html(newProjectInfo.privacy);
                $('#projectCategory').html(newProjectInfo.category);
                $('#projectTag').html(newProjectInfo.tag);
              } else {
                this.$Message.error(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err.data);
            });
        } else {
          this.$Message.warning("please check your form again!");
        }
      });
    },
    deleteProjectShow() {
      this.removeProjectModal = true;
    },
    deleteProject() {
      axios
        .delete(
          "/GeoProblemSolving/project?" +
          "aid=" +
          this.projectInfo.aid
        )
        .then(res => {
          if (res.data == "Offline") {
            this.$refs.navigationEl.logout("login");
          } else if (res.data.code === 0) {
            this.$Notice.success({
              title: "Success",
              desc: "Delete project successfully."
            });
            window.location.href = '/GeoProblemSolving/projectList';
          } else {
            this.$Notice.error({
              title: "Error",
              desc: "Fail to remove the project."
            });
          }
        })
        .catch(err => {
          throw err
        });
    },
    inviteModalShow() {
      this.inviteModal = true;
      this.emailInfo.emailContent =
        "hello, it's my pleasure to invite you join in the project called " +
        this.projectInfo.name +
        ".";
    },
    invite(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var emailFormBody = {};
          emailFormBody["recipient"] = this.emailInfo.inputEmail;
          emailFormBody["mailTitle"] = this.emailInfo.emailTitle;
          emailFormBody["mailContent"] =
            this.emailInfo.emailContent + this.emailAddStr;
          axios
            .post("/GeoProblemSolving/email/invite", emailFormBody)
            .then(res => {
              if (res.data == "Success") {
                this.$Notice.success({
                  desc:
                    "The invitation has been sent successfully."
                });
                this.inviteModal = false;
              } else {
                this.$Notice.error({
                  desc: "Failed to send the invitation."
                });
              }
            })
            .catch(err => {
              console.log(err.data);
            });
        } else {
          this.$Message.info("Form check!");
        }
      });
    },
    closeInviteModel() {
      this.inviteModal = false;
    },
    emialAutoFill(value) {
      this.prompt =
        !value || value.indexOf("@") >= 0
          ? []
          : [
            value + "@gmail.com",
            value + "@sina.com",
            value + "@163.com",
            value + "@126.com",
            value + "@qq.com"
          ];
    },
    deleteMemberModelShow() {
      this.removeMemberId = "";
      this.removeMemberName = "";
      this.deleteMemberModel = true;
    },
    closeDeleteMembersModel() {
      this.deleteMemberModel = false;
    },
    removeMembersAlertShow() {
      if (this.removeMemberName != '') {
        this.deleteMemberModel = false;
        this.removeMemberAlertModel = true;
      } else {
        this.$Message.warning("There are no member be selected.");
      }
    },
    getRemoveMemberId(userId) {
      this.removeMemberId = userId;
    },
    removeMember() {
      this.deleteMemberModel = false;
      axios
        .delete("/GeoProblemSolving/project/" + this.projectInfo.aid + "/user?userId=" + this.removeMemberId)
        .then(res => {
          if (res.data === "Offline") {
            this.$refs.navigationEl.logout("login");
          } else if (res.data.code === -1) {
            this.$Notice.warning({
              title: "Result",
              desc: "The person is not the member of this project."
            });
          } else if (res.data.code === 0) {
            this.$Notice.success({
              title: "Result",
              desc: "The member has been removed from the project."
            });
            for (let i = 0; i < this.participants.length; i++){
              if (this.participants[i].userId == this.removeMemberId){
                this.participants.splice(i, 1);
              }
            }
            //被T出项目，发送站内信
            let notice = {};
            notice["recipientId"] = this.removeMemberId;
            notice["type"] = "notice";
            notice["content"] = {
              title: "Project Deleted",
              description:
                "You has been removed from this project: " + this.projectInfo.name
            };
            axios
              .post("/GeoProblemSolving/notice/save", notice)
              .then(res => {
                if (res.data == "Success") {
                  this.$refs.navigationEl.sendMessage({"type": "Notice", "receiver": this.removeMemberId});
                }
              })
              .catch(err => {
                console.log("失败原因：" + err.data);
              });

            // for (var i = 0; i < this.projectInfo.members.length; i++) {
            //     if (this.projectInfo.members[i].userId == this.removeMemberId) {
            //         this.projectInfo.members.splice(i, 1);
            //         break;
            //     }
            // }
          }
        })
        .catch(err => {
          throw err;
        });
    },
    goPersonalPage(userId) {
      if (userId == this.userInfo.userId) {
        window.location.href = "/GeoProblemSolving/newPersonalPage/overView";
      } else {
        window.location.href = "/GeoProblemSolving/memberPage/" + userId;
      }
    },
    modifyPermission() {
      window.location.href = "/GeoProblemSolving/permission/" + this.projectInfo.level + "/" + this.projectInfo.aid;
    },
    resetProjectType() {
      this.projectInfo.type = "";
      axios
        .put("/GeoProblemSolving/project", this.projectInfo)
        .then(res => {
          this.resetProjectTypeModel = false;
          if (res.data == "Offline") {
            window.location.href = "/GeoProblemSolving/login"
          } else if (res.data.code == 0) {
            // sessionStorage.setItem("projectInfo", JSON.stringify(res.data));
            // sessionStorage.setItem("projectInfo", this.encrypto(res.data));
            this.projectInfo = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err.data);
        });
    },
    goResourceCenter() {
      window.location.href = "/GeoProblemSolving/resourceCenter";
    },
    joinApplyModalShow() {
      if (this.userInfo.userState) {
        this.applyProjectInfo = Object.assign([], this.projectInfo);
        // join the project directly
        if (this.applyProjectInfo.permission != "" && JSON.parse(this.applyProjectInfo.permission).auto_join.visitor != "No") {
          axios
            .post("/GeoProblemSolving/project/" + this.applyProjectInfo.aid + "/user?" + "userId=" + this.userInfo.userId)
            .then(res => {
              if (res.data.code == 0) {
                this.$Message.info("Join this project successfully");
                this.userRole = "ordinary-member";
                window.location.href = "/GeoProblemSolving/projectInfo/" + this.applyProjectInfo.aid;
              } else {
                this.$Message.info(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err.data);
            });
        } else {
          this.applyValidate.reason = "";
          this.applyJoinModal = true;
        }
      } else {
        confirm("Please login first.");
      }
    },
    joinApply(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (
            this.haveApplied == true &&
            this.applyProjectInfo.aid == sessionStorage.getItem("applyId")
          ) {
            return;
          } else {
            let userDetail = this.userInfo;
            let description = "User " +
              userDetail.name +
              " apply to join your project: " +
              this.applyProjectInfo.name +
              " ." +
              " The reason for application is: " +
              this.applyValidate.reason;
            for (var i = 0; i < this.applyProjectInfo.members.length; i++) {
              if (this.applyProjectInfo.members[i].role == "manager") {
                let managerId = this.applyProjectInfo.members[i].userId;
                let joinForm = {};
                joinForm["recipientId"] = managerId;
                joinForm["type"] = "apply";
                joinForm["content"] = {
                  title: "Project application",
                  activityId: this.applyProjectInfo.aid,
                  activityName: this.applyProjectInfo.name,
                  activityLevel: this.applyProjectInfo.level,
                  userEmail: userDetail.email,
                  userName: userDetail.name,
                  userId: userDetail.userId,
                  description: description,
                  approve: "unknow"
                };

                axios
                  .post("/GeoProblemSolving/notice/save", joinForm)
                  .then(res => {
                    if (res.data == "Success") {
                      this.$Notice.open({
                        title: "Apply Successfully",
                        desc:
                          "The application has been sent to managers of the project."
                      });
                      this.$refs.navigationEl.sendMessage({"type": "Notice", "receiver": managerId});
                      this.applyJoinModal = false;
                      this.haveApplied = true;
                    } else {
                      this.$Notice.open({
                        desc: "Apply failed."
                      });
                    }
                  })
                  .catch(err => {
                    console.log("申请失败的原因是：" + err.data);
                  });
              }
            }
            sessionStorage.setItem("applyId", this.applyProjectInfo.aid);

            let emailObject = {
              mailTitle: "Project application",
              mailContent:
                description + "<br>" +
                "You can click this url and enter the site to process this application: " +
                "http://" + window.location.host + "/GeoProblemSolving/home"
            };
            axios
              .post("/GeoProblemSolving/project/" + this.applyProjectInfo.aid + "/application", emailObject)
              .then(res => {
                if (res.data.code !== 0) {
                  console.log(res.data.msg);
                }
              })
              .catch(err => {
                console.log(err.data);
              });
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    showToolPanel(url, title) {
      var that = this;
      var panel = jsPanel.create({
        container: "#pageBody",
        theme: "success",
        headerTitle: title,
        footerToolbar: '<p style="height:10px"></p>',
        contentSize: "800 400",
        content: url,
        disableOnMaximized: true,
        dragit: {
          containment: 5
        },
        closeOnEscape: true,
        onbeforeclose: function (panel, status, closedByUser) {
          return confirm("Please confirm your edit has been saved?");
        },
        onclosed: function (panel, status, closedByUser) {
          var index = that.workPanels.indexOf(this);
          that.workPanels.splice(index, 1);
        },
      });
      $(".jsPanel-content").css("font-size", "0");//防止出现滚动条
      $(".jsPanel").css("position", "fixed");
      this.workPanels.push(panel);
    },
  }
}
</script>
